<template>
  <div class="msg_reply">

    <el-card class="content">
      <el-table :data="list" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="序号" width="80" align="center" type="index" :index="indexMethod">
        </el-table-column>
        <el-table-column label="留言用户" align="center">
          <template slot-scope="scope">
            {{ scope.row.user && scope.row.user.name || "(用户已注销)" }}
          </template>
        </el-table-column>
        <el-table-column label="留言内容">
          <template slot-scope="scope">
            <!-- <div v-html="mdRender(scope.row.content)" /> -->
            <div v-html="scope.row.content" />
          </template>
        </el-table-column>
        <el-table-column label="留言时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createdAt }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{
              scope.row.status | statusFilterText
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="200" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" v-show="scope.row.status != 1" type="primary" @click="changeStatus(scope.row.id, 1)">
              审核通过</el-button>
            <el-button size="mini" v-show="scope.row.status != 2" type="warning" @click="changeStatus(scope.row.id, 2)">
              审核不通过</el-button>
            <el-popconfirm style="margin-left:10px;" title="该留言内容确定删除吗？" @confirm="handleDelete(scope.row.id)">
              <el-button slot="reference" size="mini" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination background :current-page.sync="page" layout="total, prev, pager, next" :total="count"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ReplyList',
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'danger',
        1: 'success',
        2: 'warning',
      }
      return statusMap[status]
    },
    // 留言状态：0-审核中,1-审核通过,2-审核不通过
    statusFilterText(status) {
      const statusMap = {
        0: '待审核',
        1: '审核通过',
        2: '审核不通过',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      count: 0,
      page:1,
      size:10
    }
  },
  mounted() {
    this.getMessageList()
  },
  methods: {
     // 自定义表格索引
    indexMethod(index) {
      return (this.page - 1) * this.size + index + 1
    },
    // 获取留言列表
    async getMessageList(page,count) {
      const res = await this.$api.httpMessageList({page,count})
      const { code, data } = res
      if (code === 200) {
        this.list = data.rows || []
        this.count = data.meta.count
      }
    },
    // 更新留言评论-审核状态
    async changeStatus(id, status) {
      this.$api.httpMessageCheck({ id, status }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.getMessageList()
        }
      })
    },
    // 删除留言数据
    handleDelete(id) {
      this.$api.httpMessageDelete(id).then((res) => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          this.getMessageList()
        }
      })
    },
    // Markdown语法解析
    mdRender(content) {},
    // 搜索
    async searchData() {
      let searchContent = {}
      Object.keys(this.searchForm).forEach((key) => {
        if (this.searchForm[key] !== '') {
          searchContent[key] = this.searchForm[key]
        }
      })
      const res = await this.$api.httpMessageList(searchContent)
      const {code,data} = res
      if (code === 200) {
        this.list = data.rows || []
      }
    },
    // 点击页码
    handleCurrentChange(page) {
      this.getMessageList(page)
    },
    // 重置表单
    resetSearchData() {
      this.$refs['searchForm'].resetFields()
      this.getMessageList()
    },
  },
}
</script>

<style scoped lang="scss">
.search {
  margin-bottom: 14px;
}
.pagination {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
</style>
